function Chart(classname) {
    this.box = document.querySelector("." + classname);
    this.ulis = this.box.querySelectorAll("ul li");
    this.olis = this.box.querySelectorAll("ol li");
    this.left = this.box.querySelector(".left");
    this.right = this.box.querySelector(".right");
    this.timerId = null;
    this.index = 0;
    this.leftMove();
    this.rightMove();
    this.roundMove();
    this.autoMove();
    this.auto();
    this.closeMove();
}
Chart.prototype.leftMove = function() {
    var that = this;
    this.left.onclick = function() {
        that.index--;
        if (that.index < 0) {
            that.index = that.ulis.length - 1;
        }
        for (var i = 0; i < that.ulis.length; i++) {
            that.olis[i].className = "";
            that.ulis[i].className = "";
        }
        console.log(that.index);
        that.ulis[that.index].className = "current";
        that.olis[that.index].className = "current";
    }
}
Chart.prototype.rightMove = function() {
    var that = this;
    this.right.onclick = function() {
        that.index++;
        if (that.index > that.ulis.length - 1) {
            that.index = 0;
        }
        for (var i = 0; i < that.ulis.length; i++) {
            that.olis[i].className = "";
            that.ulis[i].className = "";
        }
        that.ulis[that.index].className = "current";
        that.olis[that.index].className = "current";
    }
}
Chart.prototype.roundMove = function() {
    for (let i = 0; i < this.ulis.length; i++) {
        var that = this;
        this.olis[i].onclick = function() {
            that.index = i;
            for (var j = 0; j < that.ulis.length; j++) {
                that.ulis[j].className = "";
                that.olis[j].className = "";
            }
            that.ulis[that.index].className = "current";
            that.olis[that.index].className = "current";
        }
    }
}
Chart.prototype.autoMove = function() {
    var that = this;
    this.box.onmouseout = function() {
        that.auto()
    }
}
Chart.prototype.auto = function() {
    this.timerId = setInterval(() => { 
        this.index++;
        if (this.index > this.ulis.length - 1) {
            this.index = 0;
        }
        for (var i = 0; i < this.ulis.length; i++) {
            this.olis[i].className = "";
            this.ulis[i].className = "";
        }
        this.ulis[this.index].className = "current";
        this.olis[this.index].className = "current";
    }, 3000)
}
Chart.prototype.closeMove = function() {
    this.box.onmouseover = () => {
        clearInterval(this.timerId)
    }
}
new Chart("banner-middle");